<template>
  <div class="recommend">
    <div class="image-header">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f991a2e43b128bdb6eaaa22172e71e57.jpg"
        alt
      />
    </div>
    <van-pull-refresh v-model="loading" @refresh="onRefresh" >
      <!-- <p>刷新次数: {{ count }}</p> -->
      <div class="resha" v-for="(item, id) in twoItem" :key="id">
        <!-- 用户信息 -->
        <div class="heyon">
          <!-- 左边头像 -->
          <div class="zbtx">
            <img
              :src="item.toX_img"
              alt=""
              style="width: 40px; height: 40px; border-radius: 50%"
            />
          </div>
          <!-- 右边用户名 -->
          <p class="ybyhm">{{ item.mZ }}</p>
          <!-- 右下边用户用的手机 -->
          <p class="yhsj">{{ item.shouJI }}</p>
          <!-- 更多 -->
          <div class="gd">
            <van-icon name="bars" />
          </div>
        </div>
        <!-- 标题 -->
        <p
          class="hebiao"
          @click="
            $router.push({
              path: 'Details',
              query: {
                id: item.id,
                toX_img: item.toX_img,
                mZ: item.mZ,
                shouJI: item.shouJI,
                biaoTI: item.biaoTI,
              },
            })
          "
        >
          {{ item.biaoTI }}
        </p>
        <!-- 展示图片 -->
        <div
          class="hezhan"
          @click="
            $router.push({
              path: 'Details',
              query: {
                id: item.id,
                toX_img: item.toX_img,
                mZ: item.mZ,
                biaoTI: item.biaoTI,
                shouJI: item.shouJI,
              },
            })
          "
        >
          <img :src="item.pin_img" />
        </div>
        <!-- 2个小圈圈 -->
        <div class="hequan">
          <div class="heQquan">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12f6da4120f3953816e543be83fd3d30.png?w=800&h=800"
              alt=""
            />
            <p class="heXIao">xioami 10</p>
          </div>
          <div class="heQquan">
            <img
              src="https://m.mi.com/static/img/huati.d947499711.png"
              alt=""
            />
            <p class="heXIao">小米</p>
          </div>
        </div>
        <!-- 第一天评论回复 -->
        <div class="hedi">
          <!-- 用户名 -->
          <div class="heYhm">{{ item.pinLUN }}:</div>
          <!-- 评论内容 -->
          <div class="heYhnr">{{ item.pinNEI }}</div>
        </div>
        <!-- 转发，回复，点赞 -->
        <div class="hezhuan">
          <div class="heZHAn">
            <van-icon name="share-o" />
          </div>
          <div class="heZHAn">
            <van-icon name="chat-o" />
          </div>
          <div class="heZHAn">
            <van-icon name="good-job-o" />
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <!-- 朋友圈展示列表 -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    // 头像，名字，手机型号，标题，评论图片，评论用户，品论内容
    // const synThesis = ref(0);
    const loading = ref(false);
    const index = ref(2);
    const onRefresh = () => {
      setTimeout(() => {
        if (twoItem.value.length === 12) {
          loading.value = false;
          Toast("没有更多数据了");
          return
      //  disabled=true;
        }
        Toast("刷新成功");
        loading.value = false;
        twoItem.value.push(...itEm.slice(index.value, index.value + 2));
        index.value = index.value + 2;
        console.log(twoItem.value);
        console.log(index.value);
      }, 500);
    };
    const twoItem = ref([]);
    onMounted(() => {
      twoItem.value = itEm.filter((item, index) => {
        return index < 2 ? item : false;
      });
    });
    const itEm = [
      {
        id: 1,
        toX_img: require("@/image/32.jpg"),
        mZ: "咖啡女仆",
        shouJI: "荣耀30",
        biaoTI: "无题，哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/in-swipe1.jpg"),
        pinLUN: "念旧",
        pinNEI: "我也用荣耀系列耶",
      },
      {
        id: 2,
        toX_img: require("@/image/33.jpg"),
        mZ: "八二年的咖啡",
        shouJI: "荣耀10",
        biaoTI: "荣耀手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/in-swipe2.jpg"),
        pinLUN: "空城旧梦",
        pinNEI: "我也用荣耀欧耶",
      },
      {
        id: 3,

        toX_img: require("@/image/OIP-C (1).jpg"),
        mZ: "翻滚的胖子",
        shouJI: "xioami 10",
        biaoTI: "我超级喜欢这个手机带来的感觉,超级厉害dwdawdwadwdawd",
        pin_img: require("@/imaG/in-swipe3.jpg"),
        pinLUN: "意念永恒",
        pinNEI: "我也用小米",
      },
      {
        id: 4,

        toX_img: require("@/image/OIP-C (5).jpg"),
        mZ: "猫屎咖啡",
        shouJI: "荣耀20",
        biaoTI: "荣耀手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/in-swipe4.jpg"),
        pinLUN: "空城旧梦",
        pinNEI: "我也用荣耀呵呵耶",
      },
      {
        id: 5,

        toX_img: require("@/image/OIP-C (6).jpg"),
        mZ: "八八年的咖啡",
        shouJI: "荣耀30",
        biaoTI: "荣耀手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/in-swipe5.jpg"),
        pinLUN: "一瓶八二年的可乐",
        pinNEI: "我也用耶",
      },
      {
        id: 6,

        toX_img: require("@/image/OIP-C (12).jpg"),
        mZ: "八",
        shouJI: "荣耀40",
        biaoTI: "荣耀手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi-better.jpg"),
        pinLUN: "希望永春",
        pinNEI: "我也用荣呵呵呵耶",
      },
      {
        id: 7,

        toX_img: require("@/image/OIP-C (22).jpg"),
        mZ: "华为110",
        shouJI: "华为 node10",
        biaoTI: "华为手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi-shouhuan6.jpg"),
        pinLUN: "空城旧梦",
        pinNEI: "我也用华为耶",
      },
      {
        id: 8,

        toX_img: require("@/image/OIP-C (23).jpg"),
        mZ: "别叫我达芬奇",
        shouJI: "苹果8",
        biaoTI: "苹果手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi-tv-ea-69.jpg"),
        pinLUN: "空城旧梦",
        pinNEI: "我也用荣耀80耶",
      },
      {
        id: 9,

        toX_img: require("@/image/OIP-C (24).jpg"),
        mZ: "叫我女王大人",
        shouJI: "苹果12",
        biaoTI: "苹果虎眼石手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi-tvs.jpg"),
        pinLUN: "空城",
        pinNEI: "我也用的耶",
      },
      {
        id: 10,

        toX_img: require("@/image/OIP-C.jpg"),
        mZ: "叫我男神大人",
        shouJI: "苹果13",
        biaoTI: "苹果13手机就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi-water-clean-600.jpg"),
        pinLUN: "旧梦",
        pinNEI: "我也平哥古古怪怪用耶",
      },
      {
        id: 11,

        toX_img: require("@/image/th.jpg"),
        mZ: "我是你爸爸",
        shouJI: "苹果14",
        biaoTI: "苹果14就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/mi11-youth.jpg"),
        pinLUN: "旧城",
        pinNEI: "我都要用用耶",
      },
      {
        id: 12,

        toX_img: require("@/image/36.jpg"),
        mZ: "机械飞升",
        shouJI: "机械1008",
        biaoTI: "我就是用机械飞升就是yyds好吧，我去，哈哈哈哈哈哈哈哈哈",
        pin_img: require("@/imaG/swipe-mi11.jpg"),
        pinLUN: "废墟旧梦",
        pinNEI: "我也机械手机页用耶",
      },
    ];
    return {
      itEm,
      loading,
      onRefresh,
      twoItem,
    };
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  margin-bottom: 50px;
  .image-header {
    height: 138px;
    padding: 16px;
    img {
      height: 138px;
      border-radius: 10px;
    }
  }
  .resha {
    height: 294px;
    .heyon {
      height: 60px;
      display: flex;
      .zbtx {
        margin-left: 15px;
        margin-top: 10px;
      }
      .ybyhm {
        height: 25px;
        width: 80px;
        font-size: 14px;
        margin-top: 7px;
        margin-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // background-color: bisque;
      }
      .yhsj {
        width: 100px;
        height: 40px;
        margin-left: -72px;
        margin-top: 28px;
        font-size: 12px;
        color: #666;
        // background-color: aquamarine;
      }
      .gd {
        margin-left: 201px;
        margin-top: 12px;
      }
    }
    .hebiao {
      height: 20px;
      width: 300px;
      font-size: 17px;
      margin-left: 15px;
      margin-top: -5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hezhan {
      height: 138px;
      padding: 16px;
      margin-top: -28px;
      margin-left: -3px;
      img {
        border-radius: 10px;
        height: 138px;
        width: 352px;
      }
    }
    .hequan {
      margin-top: -15px;
      height: 20px;
      display: flex;
      .heQquan {
        background-color: #f5f5f5;
        display: flex;
        margin-left: 20px;
        // padding: 0 10px;
        .heXIao {
          font-size: 12px;
          margin-top: 2px;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
    .hedi {
      display: flex;
      background-color: #f5f5f5;
      height: 28px;
      width: 348px;
      margin-left: 17px;
      .heYhm {
        padding: 5px;
        font-size: 12px;
        color: #999;
      }
      .heYhnr {
        margin-top: 4px;
        width: 100px;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .hezhuan {
      display: flex;
      height: 100px;
      .heZHAn {
        width: 80px;
        height: 80px;
        // padding: 10 0 500px 0;
        // margin-top: 18px;
        margin-left: 40px;
      }
    }
  }
}
</style>